import './App.css';
import { useEffect, useState } from 'react';

function withPersistentData(WrappedComponent) {
  return (props) => {
    const [data, setData] = useState('');
    useEffect(() => {
      setData(localStorage.getItem('data'));
    }, []);
    // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
    return <WrappedComponent data={data} {...props} />;
  };
}

function MyComponent2(props) {
  return <div>{props.data}</div>;
}

const MyComponentWithPersistentData = withPersistentData(MyComponent2);

function App() {
  return (
    <div className="App">
      <MyComponentWithPersistentData/>
    </div>
  );
}

export default App;
